<template>
  <div class="page-bgBack">
    <rTitle :type="'back'" :tit="$route.query.id ? '编辑职位' : '发布职位'" />
    <div class="r-add-box">
      <a-form :form="form" :label-col="{ span: 7 }" :wrapper-col="{ span: 17 }">
        <div class="form-box">
          <fTitle tit="基础信息" desc="职位发布成功后，招工企业无法修改" />
          <a-row type="flex" justify="space-between">
            <a-col :span="12">
              <a-form-item label="职位名称">
                <a-input
                  class="input-w336"
                  placeholder="请输入职位名称"
                  v-decorator="['postName', { rules: [{ required: true, message: '职位名称不能为空' }] }]"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="招工企业">
                <a-select
                  class="input-w336"
                  :disabled="$route.query.id ? true : false"
                  v-decorator="[
                    'companyUnitId',
                    {
                      rules: [
                        {
                          required: true,
                          message: '招工企业不能为空'
                        }
                      ]
                    }
                  ]"
                  placeholder="选择招工企业"
                  @change="onChangeCompanyUnit"
                >
                  <a-select-option :value="item.id" v-for="item in companyIdArr" :key="item.id">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
              <div class="ws" v-if="!isPerfect">* 请先完善企业信息 <a @click="showlaborUnitModal">点击完善</a></div>
            </a-col>
            <a-col :span="12">
              <a-form-item label="岗位招聘负责人员">
                <a-select
                  v-decorator="['contactUserId', { rules: [{ required: true, message: '负责人员不能为空' }] }]"
                  :options="adminUsersFormatted"
                  :filterOption="filterOption"
                  showSearch
                  placeholder="请选择负责人员"
                  style="width: 100%"
                  @change="onContactChange"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="岗位联系电话">
                <a-input
                  placeholder="请输入联系电话"
                  v-decorator="['phone', { rules: [{ required: true, message: '联系电话不能为空' }] }]"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="职位类型">
                <a-cascader
                  v-decorator="['positionType', { rules: [{ required: true, message: '职位类型不能为空' }] }]"
                  :options="positionTypes"
                  :fieldNames="{ label: 'name', value: 'id', children: 'childList' }"
                  placeholder="请选择职位类型"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="学历经验" style="margin-bottom: 0">
                <a-form-item style="float: left; width: 160px; margin-right: 16px">
                  <a-select v-decorator="['workingSeniority', { initialValue: 1 }]" placeholder="选择经验">
                    <a-select-option :value="item.id" v-for="item in workingSeniorityArr" :key="item.id">
                      {{ item.v }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
                <a-form-item style="float: left; width: 160px">
                  <a-select v-decorator="['lowestEducation', { initialValue: 8 }]" placeholder="选择学历">
                    <a-select-option :value="item.id" v-for="item in lowestEducationArr" :key="item.id">
                      {{ item.v }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="工作城市">
                <a-cascader
                  v-decorator="['cityName', { rules: [{ required: true, message: '工作城市不能为空' }] }]"
                  :options="common.cityList"
                  placeholder="请选择工作城市"
                  style="width: 100%"
                  @change="onCityChange"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="具体工作地点">
                <a-input
                  placeholder="请输入工作地点"
                  v-decorator="['detailedAddress', { rules: [{ required: true, message: '工作地点不能为空' }] }]"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="工作性质">
                <a-radio-group v-decorator="['workType', { initialValue: 1 }]">
                  <a-radio :value="item.id" v-for="item in workTypeArr" :key="item.id">
                    {{ item.v }}
                  </a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="是否急招">
                <a-radio-group v-decorator="['isEmergency', { initialValue: false }]">
                  <a-radio :value="item.id" v-for="item in isEmergencyArr" :key="item.id">
                    {{ item.v }}
                  </a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="职位描述" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
                <a-textarea
                  style="width: 814px"
                  placeholder="请输入职位描述"
                  :auto-size="{ minRows: 8, maxRows: 15 }"
                  v-decorator="['postDescribe', { rules: [{ required: true, message: '职位描述不能为空' }] }]"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <fTitle class="mt10" tit="招聘类型" desc="选择招满即停类型时，招聘人数一满就会自动关闭岗位 " />
          <a-row type="flex" justify="space-between" style="margin-left: -72px">
            <a-col :span="24">
              <a-form-item label=" " :colon="false" :labelCol="{ span: 2 }">
                <a-radio-group v-decorator="['recruitType', { initialValue: 2 }]" @change="onNumberChange">
                  <a-radio :value="1" key="cqzp">长期招聘</a-radio>
                  <a-radio :value="2" key="zmjt">招满即停</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
            <a-col v-if="showNumber" :span="12">
              <a-form-item label="招聘人数">
                <a-input-number
                  class="input-w336"
                  :min="1"
                  :precision="0"
                  :max="99999999"
                  placeholder="请输入招聘人数"
                  v-decorator="[
                    'number',
                    {
                      initialValue: 10,
                      rules: [{ required: true, message: '请输入招聘人数' }]
                    }
                  ]"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <fTitle class="mt10" tit="薪资及福利" desc="请仔细填写，可以为您吸引更多的人才" />
          <a-row type="flex" justify="space-between" style="margin-left: -72px">
            <a-col :span="12">
              <a-form-item label="薪资范围" style="margin-bottom: 0">
                <a-input v-decorator="['sss', { rules: [{ required: true }] }]" v-show="false" />
                <a-form-item style="display: inline-block; width: 102px">
                  <a-input-number
                    :min="0"
                    :max="9999999"
                    placeholder="请输入薪资"
                    v-decorator="['lowestSalary', { rules: [{ required: true, message: '请正确输入薪资' }] }]"
                  />
                </a-form-item>
                <span style="display: inline-block; width: 20px; text-align: center; margin: 0 2px"> - </span>
                <a-form-item style="display: inline-block; width: 102px">
                  <a-input-number
                    :min="0"
                    :max="9999999"
                    placeholder="请输入薪资"
                    v-decorator="['highestSalary', { rules: [{ required: true, message: '请正确输入薪资' }] }]"
                  />
                </a-form-item>
                <span style="display: inline-block; width: 30px; text-align: center; margin: 0 2px"> 每 </span>
                <a-form-item style="display: inline-block; width: 74px">
                  <a-select v-decorator="['salaryGrantType', { initialValue: 2 }]">
                    <a-select-option :value="item.id" v-for="item in monthlySalaryArr" :key="item.id">
                      {{ item.v }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="发薪日">
                <a-select
                  class="input-w336"
                  v-decorator="[
                    'payday',
                    { initialValue: 15 },
                    {
                      rules: [
                        {
                          required: true,
                          message: '发薪日不能为空'
                        }
                      ]
                    }
                  ]"
                  placeholder="选择月份"
                >
                  <a-select-option :value="item" v-for="item in 31" :key="item">
                    {{ item }}
                  </a-select-option>
                  <a-select-option :value="item.val" v-for="item in paydayArr" :key="item.val">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="福利待遇">
                <a-select class="input-w336" :maxTagCount="3" mode="tags" style="width: 100%" placeholder="请选择福利" v-model="highlights">
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <fTitle class="mt10" tit="办公环境" desc="上传办公室环境，可以招聘到更合适的人才" />
          <div class="lable-t">上传图片 <span>支持最多上传九张图片，支持批量上传</span></div>
          <a-form-item style="margin-bottom: 0">
            <a-upload
              accept=".jpg, .png"
              list-type="picture-card"
              action="/file/api/v1/general/uploadImg"
              name="files"
              :multiple="true"
              :file-list="fileList"
              :beforeUpload="beforeUpload"
              @preview="handlePreview"
              @change="handleUpChange"
            >
              <div v-if="fileList.length < 9">
                <a-icon type="plus-circle" theme="filled" class="icon-color" />
                <div class="font">点击上传图片</div>
                <div class="font">支持jpg，png格式</div>
                <div class="font">单张尺寸不得大于1M</div>
              </div>
            </a-upload>
            <a-modal :visible="previewVisible" :footer="null" @cancel="previewVisible = false">
              <div class="mt20"></div>
              <img alt="example" style="width: 100%" :src="previewImage" />
            </a-modal>
          </a-form-item>
          <div class="lable-t">
            上传视频
            <span>支持最多上传三个视频，支持批量上传；支持mp4格式； 单个视频不得大于10M；视频封面支持jpg，png格式；单张尺寸不得超过1M</span>
          </div>
          <a-form-item label="">
            <a-upload
              accept=".mp4"
              action="/file/api/v1/general/upload/inline"
              name="files"
              :disabled="statusV"
              :beforeUpload="beforeUploadV"
              :showUploadList="false"
              @change="videoHandleUpChange"
            >
              <div v-if="newVideoFileList.length < 3">
                <a-button type="primary" class="mr12" :loading="statusV"> 点击上传 </a-button>
              </div>
            </a-upload>
            <div v-for="(item, index) in newVideoFileList" :key="index">
              <div class="video-crad mt12">
                <div class="video-v">
                  <div>
                    <a-icon type="play-circle" theme="filled" class="icon-color" />
                    <span class="ml12">{{ item.videoName }}</span>
                  </div>
                  <div>上传成功</div>
                  <div>
                    <a-upload
                      accept=".jpg, .jpeg, .png"
                      action="/file/api/v1/general/uploadImg"
                      name="files"
                      :disabled="videoNum == index"
                      :beforeUpload="beforeUpload"
                      :showUploadList="false"
                      @change="(e) => videoimgHandleUpChange(e, index)"
                      v-if="!item.imgurl"
                    >
                      <span>
                        <a-button type="link" class="mr12" style="padding: 0" :disabled="videoNum == index" :loading="videoNum == index">
                          上传封面
                        </a-button>
                      </span>
                    </a-upload>
                    <a class="mr12" @click="onView(item, 'video')">预览</a>
                    <a @click="onDel(index, 'video')">删除</a>
                  </div>
                </div>
                <div class="video-img" v-if="item.imgurl">
                  <div>
                    <a-icon type="picture" theme="filled" class="icon-color" />
                    <span class="ml12">{{ item.imgurlName }}</span>
                  </div>
                  <div>上传成功</div>
                  <div>
                    <a class="mr12" @click="onView(item, 'img')">预览</a>
                    <a @click="onDel(index, 'img')">删除</a>
                  </div>
                </div>
              </div>
              <a-form-item label="" class="fmcw">
                <a-input v-show="false" v-decorator="[`imgurl${index}`, { rules: [{ required: true, message: '封面不能为空' }] }]" />
              </a-form-item>
            </div>
          </a-form-item>
          <fTitle
            class="mt10"
            tit="附加信息"
            desc="支持在创建职位时，将职位设置为内推职位或经纪人职位；可在内推职位/经纪人职位管理处进行职位关闭；"
          />
          <div class="switch-box" :style="form.getFieldValue('isEmp') ? 'padding-bottom: 24px' : ''">
            <a-form-item label="内推职位" :label-col="{ span: 2 }">
              <a-switch
                v-decorator="['isEmp', { valuePropName: 'checked' }]"
                style="margin-left: 6px"
                :disabled="$route.query.id ? true : false"
              />
              <!-- <span class="switch-box-desc">选择之后可以为您加急招聘，求职者会优先看到此职位</span> -->
            </a-form-item>
            <a-form-item label="内推范围" :label-col="{ span: 2 }" v-if="form.getFieldValue('isEmp')" class="empCompanyIds">
              <div class="qy">
                <a-input v-decorator="['empCompanyIdsInput', { rules: [{ required: true, message: '请选择内推范围' }] }]" v-show="false" />
                <a-button class="mr12" @click="selectScopeVisible = true" :disabled="$route.query.id ? true : false"> 选择企业 </a-button>
                <div class="yxz" v-if="selectedListTemp.length > 0">
                  已选择
                  <span v-for="(item, index) in selectedListTemp" :key="index">
                    <!-- <span>{{ item.name }} <span v-if="index !== selectedListTemp.length - 1"> 、</span></span> -->
                    <span v-if="index < 2"> <span v-if="index == 1"> 、</span> {{ item.name }} </span>
                  </span>
                  <span v-if="selectedListTemp.length > 2">
                    等 <span class="icon-color">{{ selectedListTemp.length }}</span> 家
                  </span>
                </div>
                <span v-else>当前未选择</span>
              </div>
            </a-form-item>

            <a-form-item label="赏金规则" :label-col="{ span: 2 }" v-if="form.getFieldValue('isEmp')" style="margin-bottom: 0">
              <pushSet ref="pushSet" :val="pushSetVal" :empRuleIsOpen="empRuleIsOpen" :empMoneyReward="empMoneyReward" />
            </a-form-item>
          </div>
          <div class="switch-box" :style="form.getFieldValue('isBroker') ? 'padding-bottom: 2px' : ''">
            <a-form-item label="经纪人职位" :label-col="{ span: 2 }" style="margin-left: -6px">
              <a-switch
                v-decorator="['isBroker', { valuePropName: 'checked' }]"
                style="margin-left: 12px"
                :disabled="$route.query.id ? true : false"
              />
            </a-form-item>
            <a-form-item label="赏金规则" :label-col="{ span: 2 }" v-if="form.getFieldValue('isBroker')">
              <a-textarea
                placeholder="请输入赏金规则"
                :auto-size="{ minRows: 8, maxRows: 15 }"
                v-decorator="['brokerRule', { rules: [{ required: true, message: '请正确输入赏金规则' }] }]"
                :disabled="$route.query.id ? true : false"
                style="margin-left: 6px"
              />
            </a-form-item>
          </div>
        </div>
        <div class="submit">
          <a-button type="primary" @click="handleSubmit" :loading="loading" :disabled="!isPerfect"> 发布 </a-button>
        </div>
      </a-form>
    </div>
    <a-modal v-model="ylVisible" :footer="null" width="500px" @cancel="ylVisible = false">
      <div class="mt20"></div>
      <img :src="ylUrl" v-if="ylType == 'img'" width="100%" height="100%" />
      <video :src="ylUrl" controls controlsList="nodownload" width="100%" v-if="ylType == 'video'" />
    </a-modal>
    <selectScope :visible.sync="selectScopeVisible" :selectedList="selectedListTemp" @upDate="upDate" />
    <LaborUnitModel
      :visible.sync="laborUnitModelVisible"
      :mType="laborUnitMType"
      :id="laborUnitId"
      :dataJson="laborUnitDataJson"
      :ws="true"
      @upDate="laborUnitModelUpDate"
    />
  </div>
</template>

<script>
import moment from "moment";
import { getCompanyUnits, postRecruitInfos, getCompanyUnitsId, putRecruitInfos } from "../api";
import { fillDelItemToList } from "@/utils/tools";
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });
}
const workTypeArr = [
  { id: 1, v: "全职" },
  { id: 2, v: "兼职" }
];
const isEmergencyArr = [
  { id: true, v: "是" },
  { id: false, v: "否" }
];
const workingSeniorityArr = [
  { id: 1, v: "不限" },
  { id: 2, v: "应届生" },
  { id: 3, v: "1-3年" },
  { id: 4, v: "3-5年" },
  { id: 5, v: "5-10年" },
  { id: 6, v: "10年以上" }
];
const lowestEducationArr = [
  { id: 1, v: "初中" },
  { id: 4, v: "高中" },
  { id: 2, v: "中专" },
  { id: 3, v: "大专" },
  { id: 5, v: "本科" },
  { id: 6, v: "硕士" },
  { id: 7, v: "博士" },
  { id: 8, v: "其他" }
];
const monthlySalaryArr = [
  { id: 3, v: "年" },
  { id: 2, v: "月" },
  { id: 1, v: "日" },
  { id: 0, v: "小时" }
];
const paydayArr = [
  { name: "月初", val: -1 },
  { name: "月中", val: -2 },
  { name: "月底", val: -3 }
];

import rTitle from "../../component/rTitle";
import fTitle from "../../component/fTitle";
import selectScope from "./component/selectScope";
import pushSet from "./component/pushSet";
import LaborUnitModel from "../../laborUnit/component/laborUnitModel";
import { mapState } from "vuex";
export default {
  components: {
    rTitle,
    fTitle,
    selectScope,
    LaborUnitModel,
    pushSet
  },
  data() {
    return {
      adminUsersFormatted: [],
      cityNameTemp: null,
      showNumber: true,
      previewImage: "",
      previewVisible: false,
      form: this.$form.createForm(this, {}),
      socCity: "",
      officeEnvironment: [],
      fileList: [],
      videoUrl: "",
      newVideoFileList: [],
      workTypeArr,
      isEmergencyArr,
      lowestEducationArr,
      workingSeniorityArr,
      monthlySalaryArr,
      paydayArr,
      companyIdArr: [],
      highlights: [],
      loading: false,
      videoNum: -1,
      ylVisible: false,
      ylUrl: "",
      ylType: "",
      statusV: false,
      selectScopeVisible: false,
      selectedListTemp: [],
      isPerfect: true,
      laborUnitModelVisible: false,
      laborUnitData: {},
      laborUnitMType: true,
      laborUnitId: "",
      laborUnitDataJson: {},
      pushSetVal: "",
      empMoneyReward: 0,
      CompanyUnitIds: "",
      empRuleIsOpen: true
    };
  },
  computed: {
    ...mapState(["recruitment", "common"]),
    adminUsers() {
      return this.recruitment.adminUsers;
    },
    positionTypes() {
      return this.recruitment.positionTypes;
    },
    citySourceMap() {
      return this.common.citySourceMap;
    }
  },
  watch: {
    adminUsers: {
      handler(newVal) {
        this.adminUsersFormatted = newVal;
      },
      immediate: true
    }
  },
  created() {
    this.onGetCompanyUnits();
    setTimeout(() => {
      this.form.setFieldsValue({
        sss: "123"
      });
    }, 100);
    if (this.$route.query.id) {
      this.onGetCompanyUnitsId();
    }
  },
  mounted() {},
  methods: {
    moment,
    initCityName(initVal) {
      if (!initVal) {
        return undefined;
      }
      const cityArr = initVal.split(",");
      if (cityArr.length > 0) {
        const id1 = parseInt(cityArr[0]);
        const item = this.citySourceMap[id1];
        if (item.parentId > 0) {
          return [item.parentId, id1];
        } else {
          return [id1];
        }
      } else {
        return undefined;
      }
    },
    formatCityName() {
      if (this.cityNameTemp) {
        const labels = this.cityNameTemp.map((item) => item.label || item.name).join("/");
        const values = this.cityNameTemp.map((item) => item.value || item.id);
        return [values[values.length - 1], labels].join(",");
      }
      return false;
    },
    onCityChange(value, selectedOptions) {
      this.cityNameTemp = selectedOptions;
    },
    onContactChange(val, node) {
      this.form.setFieldsValue({
        phone: node.data.props.phone
      });
    },
    onNumberChange(e) {
      if (e.target.value === 1) {
        this.showNumber = false;
      } else {
        this.showNumber = true;
      }
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    },
    async onGetCompanyUnits(id) {
      try {
        const { data } = await getCompanyUnits({
          pageNo: 1,
          pageSize: 1000
        });
        this.companyIdArr = data.entities;
        if (id) {
          this.onChangeCompanyUnit(id);
        }
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    async onGetCompanyUnitsId() {
      try {
        const v = "/recruit2/api/v1/recruitInfos/findById/" + this.$route.query.id;
        const { data } = await getCompanyUnitsId(v);
        if (data.officeEnvironment) {
          this.officeEnvironment = data.officeEnvironment;
          const arr = data.officeEnvironment.split(",");
          arr.forEach((e) => {
            this.fileList.push({
              uid: e,
              name: e,
              status: "done",
              url: e,
              types: "edit"
            });
          });
        }
        setTimeout(() => {
          const theCityName = this.initCityName(data.cityName);
          if (theCityName) {
            this.cityNameTemp = theCityName.map((id) => this.citySourceMap[id]);
          }
          this.adminUsersFormatted = fillDelItemToList(
            {
              label: data.contactName,
              value: data.contactUserId,
              disabled: true
            },
            this.adminUsersFormatted
          );
          this.form.setFieldsValue({
            cityName: theCityName,
            contactUserId: data.contactUserId,
            phone: data.phone,
            recruitType: data.recruitType,
            positionType: data.positionType ? data.positionType.split(",") : undefined,
            detailedAddress: data.detailedAddress,
            postName: data.postName,
            postDescribe: data.postDescribe,
            workType: data.workType,
            workingSeniority: data.workingSeniority,
            lowestEducation: data.lowestEducation,
            number: data.number,
            companyUnitId: data.companyUnitName,
            highestSalary: data.highestSalary,
            lowestSalary: data.lowestSalary,
            salaryGrantType: data.salaryGrantType,
            payday: data.payday,
            isEmergency: data.isEmergency,
            isEmp: data.isEmp === 1,
            isBroker: data.isBroker === 1
          });
          if (data.recruitType === 1) {
            this.showNumber = false;
          } else {
            this.showNumber = true;
          }
          const video = data.video ? data.video.split(",") : [];
          const videoCover = data.videoCover ? data.videoCover.split(",") : [];
          video.forEach((e, i) => {
            if (e) {
              const v = e.split("|name|");
              const img = videoCover[i] ? videoCover[i].split("|name|") : [];
              this.newVideoFileList.push({
                imgurl: img[0],
                imgurlName: img[1],
                videoUrl: v[0],
                videoName: v[1]
              });
              const n = `imgurl${i}`;
              setTimeout(() => {
                this.form.setFieldsValue({
                  [n]: img[0]
                });
              });
            }
          });
          setTimeout(() => {
            this.form.setFieldsValue({
              empCompanyIdsInput: data.empCompanyIds,
              brokerRule: data.brokerRule
            });
          });
          if (data.empCompanyIds) this.selectedListTemp = JSON.parse(data.empCompanyIds);
          this.pushSetVal = data.empRule;
          this.empMoneyReward = data.empMoneyReward ? parseFloat(data.empMoneyReward) : 0;
          this.empRuleIsOpen = data.empRuleIsOpen;
          this.highlights = data.highlights.length > 0 ? data.highlights.split(",") : [];
        }, 100);
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    async onPostRecruitInfos(v) {
      try {
        this.loading = true;
        await postRecruitInfos(v);
        this.$notification.success({
          message: "提示",
          description: "操作成功"
        });
        this.loading = false;
        this.$router.go(-1);
      } catch (err) {
        this.loading = false;
        console.log("error log --> ", err);
      }
    },
    async onPutRecruitInfos(v) {
      try {
        v.id = this.$route.query.id;
        this.loading = true;
        await putRecruitInfos(v);
        this.$notification.success({
          message: "提示",
          description: "操作成功"
        });
        this.loading = false;
        this.$router.go(-1);
      } catch (err) {
        this.loading = false;
        console.log("error log --> ", err);
      }
    },
    handleSubmit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          const theCityName = this.formatCityName();
          if (theCityName) {
            values.cityName = theCityName;
          }
          values.highlights = this.highlights.join(",");
          values.officeEnvironment = typeof this.officeEnvironment === "string" ? this.officeEnvironment : this.officeEnvironment.join(",");
          values.isEmergency = values.isEmergency ? 1 : 2;
          values.isEmp = values.isEmp ? 1 : null;
          values.empRuleIsOpen = values.isEmp;
          values.isBroker = values.isBroker ? 1 : null;
          values.number = values.number ? values.number : 0;
          values.positionType = values.positionType ? values.positionType.join(",") : null;

          const video = [null, null, null];
          const videoCover = [null, null, null];
          this.newVideoFileList.forEach((e, i) => {
            video[i] = e.videoUrl ? e.videoUrl + "|name|" + e.videoName : null;
            videoCover[i] = e.imgurl ? e.imgurl + "|name|" + e.imgurlName : null;
          });
          values.video = video.join(",") === ",," ? "" : video.join(",");
          values.videoCover = videoCover.join(",") === ",," ? "" : videoCover.join(",");
          if (values.isEmp) {
            if (!this.$route.query.id && this.$refs.pushSet) this.$refs.pushSet.handleOk();
            const empCompanyIds = this.selectedListTemp.map((e) => {
              return {
                id: e.id,
                name: e.name
              };
            });
            values.empCompanyIds = JSON.stringify(empCompanyIds);
            if (!this.$route.query.id) {
              if (this.$refs.pushSet.values) {
                values.empMoneyReward = this.$refs.pushSet.values.empMoneyReward;
                values.empRuleIsOpen = this.$refs.pushSet.values.empRuleIsOpen;
                values.empRule = JSON.stringify(this.$refs.pushSet.values.keys);
              } else {
                return true;
              }
            }
          }
          this.companyIdArr.some((e) => {
            if (e.id === values.companyUnitId) {
              values.companyUnitName = e.name;
              return true;
            }
          });
          if (this.fileList.length > 9) {
            this.$message.error("最多上传9张图片");
            return false;
          }
          if (values.empCompanyIds === "[]") {
            this.$message.error("请添加内推范围");
            return false;
          }
          if (values.empCompanyIdsInput) delete values.empCompanyIdsInput;
          if (values.imgurl0) delete values.imgurl0;
          if (values.imgurl1) delete values.imgurl1;
          if (values.imgurl2) delete values.imgurl2;
          if (values.lowestSalary <= values.highestSalary) {
            if (this.$route.query.id) {
              delete values.companyUnitId;
              this.onPutRecruitInfos(values);
            } else {
              this.onPostRecruitInfos(values);
            }
          } else {
            this.$message.error("薪资范围填写有误");
          }
        }
      });
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
    handleUpChange(e) {
      this.fileList = e.fileList;
      if (e.fileList.length === 0) {
        this.fileList = [];
      }
      if (!e.file?.status) {
        this.fileList.map((e, i) => {
          if (e.size / 1024 / 1024 > 1) {
            this.fileList.splice(i, 1);
          }
        });
      }
      const officeEnvironment = [];
      e.fileList.forEach((item, index) => {
        if (item.status === "done") {
          if ((item.response?.data && item.response?.data[0]) || item.url) {
            if (item.types !== "edit") {
              officeEnvironment.push(item.response.data[0]);
            } else {
              officeEnvironment.push(item.url);
            }
          } else {
            this.$message.error("上传图片失败");
          }
        }
      });
      this.officeEnvironment = officeEnvironment;
    },
    videoHandleUpChange(e) {
      if (e.file?.status) {
        this.statusV = true;
      }
      if (!e?.event && e.file.status === "done") {
        if (e.file.response?.data && e.file.response?.data[0]) {
          this.newVideoFileList.push({
            videoUrl: e.file.response.data[0],
            videoName: e.file.name
          });
          this.statusV = false;
        } else {
          this.$message.error("上传视频失败");
          this.statusV = false;
        }
      }
    },
    videoimgHandleUpChange(e, index) {
      if (!e?.event && e.file.status === "done") {
        this.videoNum = index;
        if (e.file.response?.data && e.file.response?.data[0]) {
          const json = this.newVideoFileList[index];
          json.imgurl = e.file.response.data[0];
          json.imgurlName = e.file.name;
          const n = `imgurl${this.videoNum}`;
          setTimeout(() => {
            this.form.setFieldsValue({
              [n]: json.imgurl
            });
          });
          this.newVideoFileList.splice(index, 1, json);
          this.videoNum = -1;
        } else {
          this.$message.error("上传封面失败");
          this.videoNum = -1;
        }
      }
    },
    onChangeCompanyUnit(e) {
      this.CompanyUnitIds = e;
      const arr = this.companyIdArr.filter((f) => {
        if (f.id === e) {
          this.isPerfect = f.isPerfect;
          this.laborUnitData = f;
          return f;
        }
      });
      if (arr[0]?.address) {
        const address = arr[0].address.split(",");
        setTimeout(() => {
          const theCityName = this.initCityName(arr[0].address);
          if (theCityName) {
            this.cityNameTemp = theCityName.map((id) => this.citySourceMap[id]);
          }
          this.form.setFieldsValue({
            cityName: theCityName,
            detailedAddress: address[2]
          });
        });
      } else {
        setTimeout(() => {
          this.form.setFieldsValue({
            cityName: undefined,
            detailedAddress: ""
          });
        });
      }
    },
    showlaborUnitModal() {
      const e = this.laborUnitData;
      let v = [];
      if (e.address) v = e.address.split(",");
      this.laborUnitModelVisible = true;
      this.laborUnitMType = false;
      this.laborUnitId = e.id;
      this.laborUnitDataJson = {
        name: e.name,
        logo: e.logo,
        socCity: v[0] || null,
        socCityName: v[1] || null,
        legalPerson: e.legalPerson,
        companyTelephone: e.companyTelephone,
        companyEmail: e.companyEmail,
        address: v[2] || null,
        properties: e.properties || undefined,
        companyIndustryFirst: e.companyIndustryFirst || undefined,
        personSize: e.personSize || undefined,
        officialWebsite: e.officialWebsite,
        profile: e.profile,
        logos: e.logo
      };
    },
    onView(item, t) {
      this.ylType = t;
      if (t === "img") {
        this.ylUrl = item.imgurl;
      } else {
        this.ylUrl = item.videoUrl;
      }
      this.ylVisible = true;
    },
    onDel(i, t) {
      if (t === "img") {
        this.newVideoFileList[i].imgurl = null;
        this.newVideoFileList[i].imgurlName = null;
        this.$set(this.newVideoFileList, i, this.newVideoFileList[i]);
      } else {
        this.newVideoFileList.splice(i, 1);
      }
      setTimeout(() => {
        this.form.setFieldsValue({
          [`imgurl${i}`]: this.newVideoFileList[i].imgurl
        });
      });
    },
    upDate(e) {
      this.selectedListTemp = e;
      setTimeout(() => {
        this.form.setFieldsValue({
          empCompanyIdsInput: e.length > 0 ? "empCompanyIdsInput" : ""
        });
      });
    },
    laborUnitModelUpDate() {
      this.isPerfect = true;
      this.onGetCompanyUnits(this.CompanyUnitIds);
    },
    beforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 1;
      if (!isLt2M) {
        this.$message.error("图片上传大小不能超过 1MB!");
      }
      return isLt2M;
    },
    beforeUploadV(file) {
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!isLt2M) {
        this.$message.error("视频上传大小不能超过 10MB!");
      }
      return isLt2M;
    }
  }
};
</script>

<style lang="scss" scoped>
.r-add-box {
  padding: 0 24px 64px 24px;
  ::v-deep.ant-form-item-label > label {
    font-weight: 400 !important;
    color: #767885 !important;
  }
  .form-box {
    width: 952px;
    margin: 0 auto;
    .input-w336 {
      width: 336px;
    }
    .lable-t {
      color: #767885;
      margin-bottom: 16px;
      span {
        font-size: 10px;
        color: #a6a8b4;
      }
    }
    ::v-deep .ant-upload-list-picture-card-container {
      width: 144px;
      height: 108px;
      border-radius: 4px;
      overflow: hidden;
    }
    ::v-deep .ant-upload-list-item-list-type-picture-card {
      width: 144px;
      height: 108px;
      padding: 0;
      border: 0;
    }
    ::v-deep .ant-upload-select-picture-card {
      width: 144px;
      height: 108px;
      background: rgba(0, 0, 0, 0.06);
      border-radius: 4px;
      border: 0;
      .font {
        font-size: 10px;
      }
    }
    .video-crad {
      line-height: 46px;
      padding: 0 24px;
      border: 1px dashed #d9d9d9;
      border-radius: 4px;
      .video-v {
        height: 46px;
        display: flex;
        justify-content: space-between;
        & > div {
          &:nth-child(1) {
            width: 40%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          &:nth-child(2) {
            width: 20%;
          }
          &:nth-child(3) {
            width: 24%;
            text-align: right;
          }
        }
      }
      .video-img {
        height: 46px;
        display: flex;
        justify-content: space-between;
        & > div {
          &:nth-child(1) {
            width: 40%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          &:nth-child(2) {
            width: 20%;
          }
          &:nth-child(3) {
            width: 24%;
            text-align: right;
          }
        }
      }
    }
  }
  .icon-color {
    color: var(--primary);
  }
  .switch-box {
    width: 100%;
    min-height: 46px;
    background: #f4f6fa;
    border-radius: 4px;
    padding-top: 4px;
    padding-left: 24px;
    margin-bottom: 12px;
    .switch-box-desc {
      margin-left: 18px;
      font-size: 10px;
      color: #a6a8b4;
    }
  }
  .submit {
    z-index: 10;
    width: calc(100% - 186px);
    height: 56px;
    line-height: 56px;
    text-align: center;
    position: fixed;
    right: 0;
    bottom: 0;
    background: #fff;
    box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.15);
  }
  .ws {
    font-size: 12px;
    margin-top: -24px;
    margin-bottom: 16px;
    color: #a6a8b4;
  }
  .empCompanyIds {
    ::v-deep.ant-form-explain {
      margin-left: 6px;
    }
    .qy {
      display: flex;
      margin-left: 6px;
      .yxz {
        width: 700px;
        max-height: 150px;
        margin-left: 10px;
        overflow: auto;
      }
    }
  }
}
.fmcw {
  ::v-deep .ant-form-explain {
    margin-top: 6px;
  }
}
</style>
